<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	  #demo {
	    width: 50px;
	    height: 50px;
	    border-radius: 20px;
	    border-width: 80px;
	    border-style: solid;
	    border-color: rgba(33, 150, 243, 0.67) rgba(3, 169, 244, 0.63) rgba(3, 169, 244, 0.8) rgba(33, 150, 243, 0.62);
	  }
	  #circle {
	    width: 0px;
	    height: 15;
	    height: 0px;
	    border-radius: 50px;
	    border-width: 25px;
	    border-color: rgba(33, 150, 243, 0.35) rgba(0, 0, 0, 0);
	    border-style: solid;
	  }
	  #circle:hover {
	  	background-color: blanchedalmond;
	  	border-color: rgba(33, 18, 23, 0.35) rgba(0, 0, 0, 0);
	  }
	  #demo:hover {
	  	border-radius: 60px;
	  }
	</style>
</head>

<body>
	<div id="demo">
		<div id="circle">
		</div>
	</div>
</body>
</html>